<template lang="">
  <div class="download-tip">
    <img src="@/assets/icons/nav/logo.webp" class="logo" />
    <div class="qr-code">
      <img src="@/assets/imgs/download-qr.png" />
    </div>
    <div class="button">
      <button>扫描下载有料完整版APP</button>
    </div>
    <p class="text">www.dtiyu.com</p>
  </div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.download-tip {
  width: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .logo {
    width: 100px;
  }
  .qr-code {
    width: 200px;
    height: 200px;
    background: url('@/assets/icons/nav/qr-code-bg.webp') no-repeat center center;
    background-size: 100% 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 180px;
      height: 180px;
    }
  }
  .button {
    width: 210px;
    height: 46px;
    background: #20d94b;
    border-radius: 39px 39px 39px 39px;
    margin-top: 20px;
    button {
      width: 100%;
      height: 100%;
      background: transparent;
      border: none;
      color: #fff;
    }
  }
  .text {
    font-size: 16px;
    margin-top: 10px;
    color: rgba(32, 217, 75, 1);
  }
}
</style>
